<template>
  <view class="content">
    <view class="top_content">
      <div class="personal_info">
        <img class="user_icon" :src="userInfo.F_HeadIcon" alt="" />
        <text class="user_name">{{ userInfo.F_Account }}</text>
      </div>
      <div>
        <button @click="logOut()">退出</button>
      </div>
    </view>
    <view v-if="listData.length > 0" class="flex-wrp">
      <view v-for="(item, index) in listData" :key="index">
        <view class="list" @click="detailClick(item, index)">
          <text class="period">生产订单号：{{ item.poh_no }}</text>
          <text class="period">产品编码：{{ item.bii_code }}</text>
          <text class="period">产品名称：{{ item.bii_name }}</text>
        </view>
      </view>
      <u-loadmore
        v-if="listData.length < total"
        style="loadmore"
        :status="status"
        :icon-type="iconType"
        :load-text="loadText"
      />
      <view v-if="listData.length == total" class="load-more" @click="loadMore"
        >~已到底~</view
      >
    </view>
    <view v-else>
      <view class="tkxxBox">
        <image :src="noData" class="tkxxPic" />
      </view>
      <view class="contentTxt">未发现有数据~</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onUnmounted } from "vue";
import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app";
import { getHomeData } from "@/api/home";

const show = ref(false);
const userInfo = reactive({
  F_HeadIcon: "",
  F_Account: "",
});
const listData = ref<any[]>([]);
const page = ref(1);
const total = ref(0);
const hasMore = ref(true);
const status = ref("loadmore");
const iconType = ref("circle");
const loadText = reactive({
  loadmore: "上拉加载更多",
  loading: "加载中",
  nomore: "没有更多了",
});
const noData = ref("/static/image/msg.png");

const loadData = () => {
  status.value = "loading";
  getHomeData({
    pob_state: 4,
    limit: page.value,
    size: 10,
  })
    .then((res: any) => {
      if (res.success) {
        if (page.value === 1) {
          listData.value = res.data.Rows;
        } else {
          listData.value = [...listData.value, ...res.data.Rows];
        }
        total.value = res.data.Total;
        // 加载完成后，若还有更多数据，设置状态为 loadmore
        if (listData.value.length < total.value) {
          status.value = "loadmore";
        } else {
          // 没有更多数据，设置状态为 nomore
          status.value = "nomore";
        }
      }
    })
    .catch((error) => {
      console.error("加载数据失败:", error);
      // 加载失败，设置状态为 loadmore
      status.value = "loadmore";
    })
    .finally(() => {
      uni.stopPullDownRefresh();
    });
};

const loadMore = () => {
  if (listData.value.length < total.value) {
    page.value++;
    loadData();
  }
};

const logOut = () => {
  uni.showModal({
    title: "提示",
    content: "确认退出？",
    success: async (res) => {
      if (res.confirm) {
        uni.removeStorageSync("userInfo");
        uni.reLaunch({
          url: "/pages/login/index",
        });
      }
    },
  });
};

const refreshProgress = () => {
  page.value = 1;
  listData.value = [];
  loadData();
};

const detailClick = (item: any, index: number) => {
  uni.navigateTo({
    url: `/pages/feedBack/index?poh_id=${item.poh_id}`,
    params: {
      poh_id: item.poh_id,
    },
  });
};

onLoad(() => {
  page.value = 1;
  listData.value = [];
  loadData();
  uni.$on("refreshProgress", refreshProgress);
});

onShow(() => {
  let storedUserInfo = uni.getStorageSync("userInfo");
  if (storedUserInfo) {
    Object.assign(userInfo, storedUserInfo);
  } else {
    uni.reLaunch({
      url: "/pages/login/index",
    });
  }
});

onUnmounted(() => {
  uni.$off("refreshProgress", refreshProgress);
});

onReachBottom(() => {
  if (listData.value.length < total.value) {
    loadMore();
  }
});
</script>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding-bottom: 50rpx;
  background-image: url("../../assets/imgs/bg.png");
}

.top_content {
  width: 100%;
  padding: 30rpx 20rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  border-bottom-left-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  position: fixed;
  top: var(--window-top);
  left: 0;
  right: 0;
  z-index: 10;
  height: 150rpx;
  .personal_info {
    display: flex;
    align-items: center;
    .user_icon {
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
      margin-right: 25rpx;
      border: 2rpx solid #e0e0e0;
    }
    .user_name {
      font-size: 34rpx;
      font-weight: 600;
      color: #333333;
    }
  }
  button {
    background-color: #ff6f61;
    color: #fff;
    font-size: 26rpx;
    border-radius: 25rpx;
    border: none;
    box-shadow: 0 4rpx 8rpx rgba(255, 111, 97, 0.3);
  }
}

.flex-wrp {
  margin-top: calc(var(--window-top) + 170rpx);
  width: 100%;
  padding: 0 20rpx;
  box-sizing: border-box;
}

.list {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 35rpx;
  margin-bottom: 25rpx;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease-in-out;

  // &:hover {
  //   transform: translateY(-5rpx);
  // }
  .period {
    font-size: 30rpx;
    color: #555;
    margin-bottom: 12rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }
  // }
}

.loadmore {
  margin-top: 40rpx;
}

.load-more {
  text-align: center;
  padding: 30rpx 0;
  color: #777;
  font-size: 28rpx;
  margin-top: 20rpx;
}

.tkxxBox {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 150rpx;

  .tkxxPic {
    width: 350rpx;
    height: 350rpx;
  }
}

.contentTxt {
  text-align: center;
  color: #777;
  font-size: 30rpx;
  margin-top: 30rpx;
}

.buttonBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx;

  .company-item {
    width: 80%;
    margin-bottom: 25rpx;
  }
}
</style>
